<template>
  <div class="nav">
      <ul>
          <li class="li1" @click="refreshFood()"><img src="@/assets/pic/food.png" alt=""><span>food</span></li>
          <li class="li1"><img src="@/assets/pic/yundong.png" alt=""><span>sport</span></li>
          <li class="li1"><img src="@/assets/pic/bangong0.png" alt=""><span>work</span></li>
          <li class="li1 li2"><img src="@/assets/pic/down.png" alt=""><span>more</span></li>
      </ul>
  </div>

</template>

<style lang="scss">
.nav{
    margin: 0;
    width:100%;
    height: 50px;
    background-color: #fff;
}
ul,li{ padding:0;margin:0;list-style:none}
.li1{
    width: 26%;
    height: 45px;
    float: left;
    margin-right: 2%;
    margin-top: 5px;
    /* background-color: #cfc; */
}
.li1 img{
    width: 20px;
    height: 20px;
    margin: 2.5px 2px;
}
.li1 span{
    display: block;
    font-size: 14px;
    line-height: 14px;
    text-align: center;
}
.li2{
    width: 10%;
    height: 45px;
    float: left;
    margin-left: 3%;
    margin-top: 5px;
    /* background-color: #cfc; */
}
</style>

<script>
import axios from "axios";
export default {
    props:['goodsList: []'],
    data(){
        return{
            goodsList: []
        }
    },
    // mounted:function(){
    //     var _this=this;
    //     $(function(){
    //         $("li1").click(function(){
    //             var n=$(this).index(); 
    //             var type=$("span").eq(n).text();
    //             console.log(type);
    //         })
    //     })
    // },
    methods:{
        refreshFood(){
            console.log("jiayou")
            console.log(this)
            var type=$(this).children("span").text();
            // this.$emit(`change`);
            console.log(type)
        }
    }
    
}
</script>
